<template>
	<div>
		<div class="relative text-#ffffff pt-40px" >
			<!-- 黑色背景 -->
			<div class="bg-#000000 absolute w-110vw h-full top-0 left--9vw z--1">
			</div>
			<div class="flex justify-between items-center mb-20px">
				<div>
					<p class="text-36px font-bold mb-30px">持币生息，安全无忧</p>
					<p class="text-18px">赚取每日奖励，支持 USDT、USDC 及 ETH 等不同代币</p>
				</div>
				<img src="/financing/top-logo.svg" class="w-200px h-200px"/>
			</div>
			<div>
				<el-menu mode="horizontal" :ellipsis="false"
				class="el-menu-left"
				:default-active="activeIndex"
				active-text-color="#000000"
				background-color="#000000"
				@select="handleSelect"
				>
					<el-menu-item index="financing/products" :class="isActive('financing/products') ? 'is-active' : ''">
						<i class="el-icon-message"></i>
						<span slot="title">理财产品</span>
					</el-menu-item>
					<el-menu-item index="financing/regular" :class="isActive('financing/regular') ? 'is-active' : ''">
						<i class="el-icon-message"></i>
						<span slot="title">定期</span>
					</el-menu-item>
				</el-menu>
			</div>
		</div>
		<router-view></router-view>
	</div>
</template>
<script lang="ts" setup>
import {useRoute,useRouter,onBeforeRouteUpdate } from 'vue-router';
import useJump from '@/utils/jump';
const route = useRoute();
const {jumpTo} = useJump();

const activeIndex = ref<string>(route.path);

// 点击导航事件
function handleSelect(key: string, keyPath: string[]) {
	console.log(route.path,keyPath);
	let path = '/' + keyPath.join('/')
	jumpTo(path)
};
// 判断当前路由是否匹配
const isActive = (index:string)=>{
	if(route.path === '/'+index || route.path.includes('/'+index)){
		return true;
	}else{
		return false;
	}
}
// 监听路由变化
onBeforeRouteUpdate((to)=>{
	// console.log(to.path)
	activeIndex.value = to.path;
})
</script>
<style lang="scss" scoped>
::v-deep .el-menu--horizontal.el-menu{
	border-bottom: none;
	background-color:#000000;
	
}
::v-deep .el-menu-item{
	color:#ffffff;
	width:160px;
	border-radius:10px 10px 0 0 ;
}
::v-deep .el-menu-item:hover{
	background-color:#000000;
}
::v-deep .el-icon-message{
	display:none;
}
::v-deep .el-menu--horizontal>.el-menu-item.is-active {
	border-bottom:none;
	background-color:#ffffff;
}
</style>
